import React, { Component } from 'react'
import { Link } from 'react-router'
import { connect } from 'react-redux'
import Tappable from 'react-tappable'
import pureRender from "pure-render-decorator"

import { fetchArticles } from "../actions"

import ArticlesTitle from '../components/ArticlesTitle'
import ArticlesImg from '../components/ArticlesImg'
import ArticlesCreateTime from '../components/ArticlesCreateTime'
import ArticlesVisitNum from '../components/ArticlesVisitNum'

import Loading from '../../../components/Loading'
import LoadingMore from '../../../components/LoadingMore'

import PullDownToRefresh from '../../../components/PullDownToRefresh'
import PullUpToLoadMore from '../../../components/PullUpToLoadMore'
import ClickToLoadMore from '../../../components/ClickToLoadMore'

import './articles.less'

@pureRender
@connect((state)=>({
  articles: state.get('articles').get('datas'),
  isFetching: state.get('articles').get('isArticlesFetching'),
  isMore: state.get('articles').get('isMore')
}))

export default class ArticlesUl extends Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    let {params, dispatch} = this.props
    dispatch(fetchArticles(params.channelId))
    
    window.onscroll=function(){
      // this.refs.ul.offsetHeight 1683
      // console.log(window.scrollY);
      // if(this.props.isMore && !this.props.isFetching && (this.refs.ul.offsetHeight - window.scrollY) < 1089){
      //   dispatch(fetchArticles(params.channelId))
      // }
    }.bind(this)
  }

  componentDidUpdate(prevProps) {
    let {params, dispatch} = this.props
    let oldId = prevProps.params.channelId
    let newId = params.channelId
    if (newId !== oldId)
      dispatch(fetchArticles(params.channelId))
  }
  
  render() {
    const { isFetching } = this.props
    return (
      <div>
        {isFetching ? this.renderIfFetching() : this.renderIfComplete()}
      </div>
    )
  }

  renderIfFetching() {
    return (
      <Loading></Loading>
    )
  }

  renderIfComplete() {
    let { articles } = this.props
    return (
      <div>
        <ul ref="ul" className="articles-ul">
          {articles.map((article, index) => (
            <li key={article.get('info_id')} className="articles-li">
              <Link
                className="articles-a-link"
                to={`/article/${article.get('info_id')}`}>
                <div className="articles-li-title">
                  <div className="articles-li-content">
                    <div className="articles-title" >
                      <ArticlesTitle title={article.get('title')}/>
                    </div>
                    <div className="articles-other">
                      <ArticlesCreateTime cTime={article.get('create_time')}/>
                      <ArticlesVisitNum visitNum={article.get('visit_num')}/>
                    </div>
                  </div>
                </div>
                <ArticlesImg picUrl={article.get('pic_url')}/>
              </Link>
            </li>
          ))}
        </ul>
        <Tappable onTap={this._handleClick.bind(this)}>
          <ClickToLoadMore></ClickToLoadMore> 
        </Tappable>
      </div>
      )
  }

  _handleClick() {
    let {params, dispatch} = this.props
    dispatch(fetchArticles(params.channelId))
  }
}